<template>
  <div>
    <div>
      <div
        id="ColAuditing"
        style="display: flex; justify-content: space-between"
      >
        <div class="flex flex-wrap items-center">
          <el-form
            :model="form"
            label-position="top"
            style="display: inline-block"
          >
            <el-form-item label="系部" prop="dept">
              <el-select v-model="form.dept" placeholder="系部">
                <el-option label="计算机系" value="计算机系" />
                <el-option label="软件工程系" value="软件工程系" />
                <el-option label="网络技术系" value="网络技术系" />
                <el-option label="游戏系" value="游戏系" />
                <el-option label="数码媒体系" value="数码媒体系" />
                <el-option label="外语系" value="外语系" />
                <el-option label="管理系" value="管理系" />
                <el-option label="财经系" value="财经系" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="Echarts">
        <div id="myechars" style="width: 600px; height: 400px"></div>
      </div>
      <el-dialog
        title="图标汇报"
        @opened="myEcharts"
        v-model="dialogVisible"
        width="45%"
        center
      >
        <div class="Echarts">
          <div id="myechars" style="width: 600px; height: 400px"></div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import * as echarts from "echarts";
export default {
  data() {
    return {
      form: {
        dept: "",
      },
      dialogFormVisible: false,
      dialogVisible: false,
      currentPage: 1,
      pageSize: 5,
      total: 10,
      small: false,
      background: true,
      disabled: false,
    };
  },

  methods: {
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },

    myEcharts() {
      var myChart = echarts.init(document.getElementById("myechars"));
      //配置图表
      var option;
      setTimeout(function () {
        option = {
          title: {
            text: '计算机系申报情况',
            left: 'left'
          },
          legend: {},
          tooltip: {
            trigger: 'axis',
            showContent: false  
          },
          dataset: {
            source: [
              ['product', '2018', '2019', '2020', '2021'],
              ['计算机科学与数据', 56.5, 82.1, 88.7, 70.1],
              ['物联网工程', 51.1, 51.4, 55.1, 53.3, 73.8]
            ]
          },
          xAxis: { type: 'category' },
          yAxis: { gridIndex: 0 },
          grid: { top: '55%' },
          series: [
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'line',
              smooth: true,
              seriesLayoutBy: 'row',
              emphasis: { focus: 'series' }
            },
            {
              type: 'pie',
              id: 'pie',
              radius: '30%',
              center: ['50%', '25%'],
              emphasis: {
                focus: 'self'
              },
              label: {
                formatter: '{b}: {@2012} ({d}%)'
              },
              encode: {
                itemName: 'product',
                value: '2012',
                tooltip: '2012'
              }
            }
          ]
        };
      myChart.on('updateAxisPointer', function (event) {
        const xAxisInfo = event.axesInfo[0];
        if (xAxisInfo) {
          const dimension = xAxisInfo.value + 1;
          myChart.setOption({
            series: {
              id: 'pie',
              label: {
                formatter: '{b}: {@[' + dimension + ']} ({d}%)'
              },
              encode: {
                value: dimension,
                tooltip: dimension
              }
            }
          });
        }
      });
      myChart.setOption(option);
      });

      option && myChart.setOption(option);
    },
  },

  mounted() {
    this.myEcharts();
  },
};
</script>

<style scoped>
.bottom {
  margin-top: 13px;
  line-height: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.bottom span {
  font-size: 13px;
  color: #999;
}
</style>
